<template>
  <div v-show="showModal" class="fullscreenModalBox">
    <div class="van-header">绿植列表
      <van-icon class="closeIcon" name="cross" size="16" @click="showModal = false;"/>
    </div>
    <!-- 查询条件 -->
    <van-row class="search-row">
      <van-search v-model="formData.keyWord" shape="round" maxlength="20" label="" placeholder="名称 / 注意事项"
                  @search="onRefresh"></van-search>
    </van-row>
    <!-- 列表 -->
    <van-row class="listCon">
      <van-pull-refresh class="pullRefresh" v-model="refreshLoading" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" :finished-text="listData.length ? '没有更多了' : ''" @load="onLoad">
          <van-swipe-cell v-for="val in listData" :key="val.greenPlantId">
            <div class="cellContent" @click="handleChoose(val)">
              <div class="icon">
                <van-icon name="checked" color="#4eb3e9" v-if="greenPlantId === val.greenPlantId"/>
                <span v-else class="other"></span>
              </div>
              <div class="contentMain">
                <div class="imgStyle">
                  <img :src="imgHandle(val)" style="height: 60px; width: 60px;">
                </div>
                <div style="margin-left: 20px;">
                  <div>
                    <span class="label">名称：</span>
                    {{ val.greenPlantName }}
                  </div>
                  <div>
                    <span class="label">注意事项：</span>
                    {{ val.remark }}
                  </div>
                </div>
              </div>

            </div>
          </van-swipe-cell>
        </van-list>
        <van-empty v-if="!loading && !listData.length" class="custom-image"
                   :image="require('../../../../assets/images/empty.png')" description="暂无数据"/>
      </van-pull-refresh>
    </van-row>
  </div>
</template>

<script>
import {getPropertyGreenPlantPageInfo} from "@api/srvAssurance/emplcare/apply/greenPlant";
import {queryFileList} from "@api/common";

export default {
  data() {
    return {
      fileArr: [],
      showModal: false,
      loading: false,
      finished: false,
      refreshLoading: false,
      formData: {
        keyWord: '',
        pageNum: 1,
        pageSize: 20
      },
      listData: [],
      greenPlantId: ''
    }
  },
  methods: {
    handleInit(greenPlantId) {
      this.greenPlantId = greenPlantId;
      this.showModal = true;
      if (this.formData.keyWord) {
        this.formData.keyWord = '';
        this.onRefresh();
      } else if (!this.listData.length) {
        this.onRefresh();
      }
    },
    // 获取列表数据
    getListData() {
      if (this.formData.keyWord && !this.$commonReg.textReg.test(this.formData.keyWord)) {
        this.$Notify({type: "warning", message: `搜索内容${this.$commonReg.textMsg}`});
        return;
      }
      this.loading = true;
      getPropertyGreenPlantPageInfo(this.formData).then((res) => {
        this.loading = false;
        if (res.code === 1000 && res.data) {
          this.listData = [...this.listData, ...res.data.records];
          this.dealPicUrl(res.data.records);
          if (this.listData.length >= res.data.total) {
            this.finished = true;
          }
        } else {
          this.finished = true;
        }
      }).catch(() => {
        this.loading = false;
        this.finished = true;
      });
    },


    dealPicUrl(list) {
      list.forEach((item) => {
        if (item.fileCode) {
          let arr = [];
          arr.push(item.fileCode);
          queryFileList(arr).then((res) => {
            if (res.code === 1000 && res.data) {
              let fileUrl = {
                fileCode: item.fileCode,
                url: res.data[0].url,
              };
              this.fileArr.push(fileUrl);
            }
          });
        }
      })
    },

    onRefresh() {
      this.refreshLoading = false;
      this.finished = false;
      this.listData = [];
      this.formData.pageNum = 1;
      this.getListData();
    },
    onLoad() {
      this.formData.pageNum++;
      this.getListData();
    },
    // 选中人员
    handleChoose(item) {
      this.greenPlantId = item.greenPlantId;
      this.$emit('sendGreenPlant', item);
      setTimeout(() => {
        this.showModal = false;
      }, 250)
    },

    imgHandle(item) {
      let url = '';
      this.fileArr.forEach((val) => {
        if (val.fileCode === item.fileCode) {
          url = val.url;
        }
      });
      if (url === '') {
        url = require('../../../../assets/images/empty.png');
      }
      return url;
    }
  },
};
</script>

<style lang="less" scoped>
.fullscreenModalBox {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
  background: white;

  .van-header {
    height: 46px;
    padding: 0 15px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    background: #f9f9f9;
    line-height: 46px;
    font-size: 15px;
    text-align: center;
    position: relative;

    .closeIcon {
      color: #aaa;
      position: absolute;
      right: 10px;
      top: 15px;
    }
  }

  .listCon {
    height: calc(100% - 100px);
    overflow: auto;

    .cellContent {
      padding: 12px 12px 12px 45px;
      box-sizing: border-box;
      position: relative;
      font-size: 13px;
      line-height: 25px;

      .contentMain {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
      }

      .tit {
        font-size: 15px;
        line-height: 30px;

        a {
          background: rgb(70, 172, 240);
          font-size: 9px;
          color: #fff;
          margin-left: 8px;
          padding: 2px 5px;
          border-radius: 3px;
        }

        .girl {
          background: #f198a8;
        }
      }

      .icon {
        position: absolute;
        left: 14px;
        top: 19px;

        .van-icon {
          font-size: 19px;
        }

        .other {
          display: inline-block;
          width: 15px;
          height: 15px;
          border: 1px solid #aaa;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
